﻿@page
@model Net8.Identity.Server.Pages.AuthenticateModel
@{
    ViewData["Title"] = "身份认证";
}

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-6 col-lg-5">
            <div class="card-modern mt-5">
                <div class="card-header">
                    <h3 class="mb-2">
                        <i class="bi bi-shield-lock me-2"></i>身份认证
                    </h3>
                    <p class="mb-0">请输入您的登录凭据</p>
                </div>
                
                <div class="card-body">
                    @if (!string.IsNullOrEmpty(Model.AuthStatus))
                    {
                        <div class="alert alert-danger alert-modern" role="alert">
                            <i class="bi bi-exclamation-triangle me-2"></i>
                            @Model.AuthStatus
                        </div>
                    }

                    <form method="post">
                        <div class="mb-4">
                            <label for="email" class="form-label fw-semibold">
                                <i class="bi bi-person me-1"></i>用户名
                            </label>
                            <div class="input-group input-group-modern">
                                <span class="input-group-text">
                                    <i class="bi bi-person"></i>
                                </span>
                                <input type="text"
                                       class="form-control form-control-modern"
                                       id="email"
                                       name="email"
                                       value="@Model.Email"
                                       placeholder="请输入您的用户名"
                                       required
                                       autofocus />
                            </div>
                            <small class="form-text text-muted mt-1">
                                <i class="bi bi-info-circle me-1"></i>支持邮箱或用户名登录
                            </small>
                        </div>

                        <div class="mb-4">
                            <label for="password" class="form-label fw-semibold">
                                <i class="bi bi-key me-1"></i>密码
                            </label>
                            <div class="input-group input-group-modern">
                                <span class="input-group-text">
                                    <i class="bi bi-lock"></i>
                                </span>
                                <input type="password"
                                       class="form-control form-control-modern"
                                       id="password"
                                       name="password"
                                       value="@Model.Password"
                                       placeholder="请输入您的密码"
                                       required />
                                <button class="btn btn-outline-secondary" type="button" id="togglePassword">
                                    <i class="bi bi-eye" id="passwordIcon"></i>
                                </button>
                            </div>
                        </div>

                        <div class="d-grid mb-4">
                            <button type="submit" class="btn btn-primary btn-modern btn-lg">
                                <i class="bi bi-box-arrow-in-right me-2"></i>登录系统
                            </button>
                        </div>

                        <div class="text-center">
                            <div class="alert alert-info alert-modern">
                                <h6 class="alert-heading mb-2">
                                    <i class="bi bi-lightbulb me-1"></i>测试账户
                                </h6>
                                <div class="row g-2">
                                    <div class="col-6">
                                        <small>
                                            <strong>账户：</strong>test1<br>
                                            <strong>密码：</strong>123456
                                        </small>
                                    </div>
                                    <div class="col-6">
                                        <small>
                                            <strong>账户：</strong>test2<br>
                                            <strong>密码：</strong>123456
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                
                <div class="card-footer text-center" style="background: var(--gray-50); border-top: 1px solid var(--gray-200); padding: 1rem;">
                    <small class="text-muted">
                        <i class="bi bi-shield-check me-1"></i>
                        您的信息安全是我们的首要任务
                    </small>
                </div>
            </div>

            @if (!string.IsNullOrEmpty(Model.ReturnUrl))
            {
                <div class="text-center mt-3">
                    <div class="alert alert-warning alert-modern">
                        <small>
                            <i class="bi bi-arrow-return-left me-1"></i>
                            <strong>授权回调：</strong>
                            <code class="bg-light p-1 rounded ms-1">@Model.ReturnUrl</code>
                        </small>
                    </div>
                </div>
            }
        </div>
    </div>
</div>

@section Scripts {
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 聚焦到用户名输入框
            const emailInput = document.getElementById('email');
            if (emailInput && !emailInput.value) {
                emailInput.focus();
            }
            
            // 密码显示/隐藏切换
            const togglePassword = document.getElementById('togglePassword');
            const passwordInput = document.getElementById('password');
            const passwordIcon = document.getElementById('passwordIcon');
            
            if (togglePassword) {
                togglePassword.addEventListener('click', function() {
                    const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                    passwordInput.setAttribute('type', type);
                    
                    if (type === 'password') {
                        passwordIcon.className = 'bi bi-eye';
                    } else {
                        passwordIcon.className = 'bi bi-eye-slash';
                    }
                });
            }
            
            // 表单提交增强
            const form = document.querySelector('form');
            const submitBtn = form ? form.querySelector('button[type="submit"]') : null;
            const originalBtnText = submitBtn ? submitBtn.innerHTML : '';
            
            // 检查页面加载时是否有错误，如果有则恢复按钮状态
            const hasError = document.querySelector('.alert-danger');
            if (hasError && submitBtn) {
                submitBtn.innerHTML = originalBtnText;
                submitBtn.disabled = false;
            }
            
            if (form && submitBtn) {
                form.addEventListener('submit', function(e) {
                    // 基本表单验证
                    const emailValue = emailInput.value.trim();
                    const passwordValue = passwordInput.value.trim();
                    
                    if (!emailValue || !passwordValue) {
                        e.preventDefault();
                        return false;
                    }
                    
                    // 更新按钮状态
                    submitBtn.innerHTML = '<i class="bi bi-hourglass-split me-2"></i>登录中...';
                    submitBtn.disabled = true;
                    
                    // 设置超时恢复按钮状态（防止网络问题导致按钮永久禁用）
                    setTimeout(function() {
                        if (submitBtn.disabled) {
                            submitBtn.innerHTML = originalBtnText;
                            submitBtn.disabled = false;
                        }
                    }, 10000); // 10秒后自动恢复
                });
            }
            
            // 便捷填充测试账户
            document.querySelectorAll('.alert-info small').forEach(function(element) {
                element.style.cursor = 'pointer';
                element.title = '点击快速填充登录信息';
                element.addEventListener('click', function() {
                    const text = this.textContent;
                    const accountMatch = text.match(/账户：(\w+)/);
                    const passwordMatch = text.match(/密码：(\w+)/);
                    
                    if (accountMatch && passwordMatch) {
                        emailInput.value = accountMatch[1];
                        passwordInput.value = passwordMatch[1];
                        emailInput.focus();
                        
                        // 清除可能存在的错误提示
                        const errorAlert = document.querySelector('.alert-danger');
                        if (errorAlert) {
                            errorAlert.style.opacity = '0.5';
                        }
                    }
                });
            });
            
            // 输入框变化时清除错误状态
            [emailInput, passwordInput].forEach(function(input) {
                if (input) {
                    input.addEventListener('input', function() {
                        const errorAlert = document.querySelector('.alert-danger');
                        if (errorAlert && this.value.trim()) {
                            errorAlert.style.opacity = '0.3';
                        }
                    });
                }
            });
        });
    </script>
}